import React from 'react';
import ReactDOM from 'react-dom';
import '../../static/tero/base.css'
import '../../static/app.css'
import { DatePicker } from 'antd';
import u from '../../common.js'


import Table from './table.jsx'
import $ from 'jquery'
const { RangePicker } = DatePicker;



class Whole extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      index: 0,
      display: 'none',
      operation: ['导出', '研判', '删除', '加入样本库', '标记已阅'],
      flag: true,
      startTime: '',
      endTime: '',

    }
  }
  componentDidUpdate() {
  }
  componentDidMount() {

    var that = this;
    $('.app-top-ullist').find('li:last-child').siblings().click(function () {
      that.setState((prevState, props) => ({
        flag: true
      }))
    })
  }
  onChangeDate(moment, string) {
    this.setState((prevState, props) => ({
      startTime: string[0],
      endTime: string[1]
    }))
  }
  onOkDate() {
    this.refs.tabledate.tableData(1, u.substrTime(this.state.startTime,'start'), u.substrTime(this.state.endTime,'end')) 
  } 
  render() {
    return (
      <div className='app'>

        <div className="app-header">
          <div className="app-top">
            <ul>
              <li>语言：</li>
              <li>全部</li>
              <li>中文</li>
              <li>藏文</li>
              <li>英语</li>
              <li>其他</li>
            </ul>
            <ul>
              <li>浏览倾向：</li>
              <li>全部</li>
              <li>已阅</li>
              <li>未阅</li>
            </ul>
          </div>
          <div className="app-top">
            <ul className='app-top-ullist'>
              <li>时间：</li>
              <li>今日</li>
              <li>昨日</li>
              <li>近三日</li>
              <li>近七日</li>
              <li className={this.state.flag ? '' : 'activve'} onClick={() => {
                this.setState((prevState, props) => ({
                  flag: false
                }))
              }}>{this.state.flag ? '自定义' : <RangePicker
                showTime={{ format: 'HH:mm' }}
                format="YYYY-MM-DD HH:mm"
                placeholder={['Start Time', 'End Time']}
                onChange={this.onChangeDate.bind(this)}
                onOk={this.onOkDate.bind(this)}
              />}</li>
            </ul>
          </div>
        </div>
        <div className='app-conter' style={{paddingTop:"30px"}}>
          <Table operation={this.state.operation}  ref="tabledate" />

        </div>
      </div>

    )
  }
}




export default Whole